<template xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
  <div class="copybox">
    <div class="messagebox">
      <div v-if="giftCode&&!recive">
        <div class="messagebox-header">
          <h1 class="title" v-if="!hasReceive">领取提示</h1>
          <h1 class="title" v-else>礼包详情</h1>
        </div>
        <div class="messagebox-message">
          <p class="messagebox-text" v-if="!hasReceive">恭喜您抢到兑换码：</p>
          <p class="messagebox-text" v-else>您的兑换码为：</p>
          <input class="messagebox-text" v-model="giftCode"/>
        </div>
        <div class="bottom-btn">
          <button type="button" class="btn-button"
                  v-clipboard:copy="giftCode"
                  v-clipboard:success="onCopy"
                  v-clipboard:error="onError">复制
          </button>
        </div>
      </div>
      <div v-else-if="!giftCode">
        <div class="messagebox-header">
          <h1 class="title">领取提示</h1>
        </div>
        <div class="messagebox-message">
          <p class="messagebox-text">游戏太火爆啦，已经领完了！</p>
        </div>
        <div class="bottom-btn">
          <button type="button" class="btn-button" @click="confirmBox">确定</button>
        </div>
      </div>
      <div v-if="recive">
        <div class="messagebox-header">
          <h1 class="title">提示信息</h1>
        </div>
        <div class="messagebox-message">
          <p class="messagebox-text">复制成功！</p>
        </div>
        <div class="bottom-btn">
          <button type="button" class="btn-button" @click="confirmBox">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        recive: false
      }
    },
    props: {
      'giftCode': {
        type: String
      },
      'hasReceive': {
        type: String
      }
    },
    methods: {
      onCopy: function (e) {
        this.recive = true
        console.log(this.hasReceive)
      },
      onError: function (e) {
        console.log('无法复制文本！')
      },
      confirmBox() {
        this.eventBus.$emit('copyOk', false)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .copybox
    position fixed
    display flex
    align-items center
    justify-content center
    top 0
    left 0
    width 100%
    height 100%
    z-index 9999
    background rgba(0, 0, 0, .5)
    .messagebox
      position relative
      display flex
      flex-direction column
      width 488px
      height 300px
      background #fff
      border-radius 20px
      .messagebox-header
        width 100%
        display flex
        justify-content center
        padding 42px 0 32px 0
      .messagebox-message
        display flex
        flex-direction column
        width 100%
        font-size 28px
        color #999
        text-align center
        .messagebox-text
          display inline-block
          text-align center
          line-height 40px
          color #999
      .bottom-btn
        position absolute
        bottom 0
        left 0
        width 100%
        height 82px
        border-top 2px solid rgba(0, 0, 0, .2)
</style>
